<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Design Tacos</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" />
</head>
<body>
    <h1>Design your taco</h1>
    <img th:src="@{/images/landscape.jpg}">

    <form method="post" th:object="${design}">

         <span class="validationError"
               th:if="${#fields.hasErrors('ingredients')}"
               th:errors="*{ingredients}">Ingredient Error</span>

        <div class="grid">
            <div class="ingredient-group" id="wraps">
                <h3>Design your wrap:</h3>
                <div th:each="ingredient : ${wrap}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="proteins">
                <h3>Design your proteins:</h3>
                <div th:each="ingredient : ${protein}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="cheeses">
                <h3>Design your cheeses:</h3>
                <div th:each="ingredient : ${cheeses}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="veggies">
                <h3>Design your veggies:</h3>
                <div th:each="ingredient : ${veggies}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="sauces">
                <h3>Design your sauces:</h3>
                <div th:each="ingredient : ${sauces}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="postitem">
                <h3>Name your taco creation</h3>
                <input type="text" th:field="*{name}"/>
                <!-- end::all[] -->
                <span th:text="${#fields.hasErrors('name')}">XXX</span>
                <span class="validationError"
                      th:if="${#fields.hasErrors('name')}"
                      th:errors="*{name}">Name Error</span>
                <!-- tag::all[] -->
                <br/>
                <button id="submit">Submit your taco</button>
            </div>

        </div>
    </form>
</body>
</html>